<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
      .container {
        margin: 0 auto;
        --size: calc(100vw / 8);
      }
      .row {
        display: flex;
      }
      .col {
        width: var(--size);
        height: var(--size);
        flex-shrink: 0;
        border: 1px solid red;
        background-color: skyblue;
        clip-path: polygon(50% 5%, 95% 25%, 95% 75%, 50% 95%, 5% 75%, 5% 25%);
        transition: all 0.5s;
      }
      /* 偶数行 */
      .row:nth-child(2n) {
        transform: translateX(calc(var(--size) / 2 * -1));
      }
      /* 从第二行开始, 下面的第一行往上移一定距离 */
      .row {
        margin-bottom: calc(var(--size) / 4.6 * -1);
      }
      .row .col img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>

<div class="container">
    <div class="row">
      <div class="col"><img src="/src/img/grid/01.png" /></div>
      <div class="col"><img src="/src/img/grid/02.png" /></div>
      <div class="col"><img src="/src/img/grid/03.png" /></div>
      <div class="col"><img src="/src/img/grid/04.png" /></div>
      <div class="col"><img src="/src/img/grid/05.png" /></div>
      <div class="col"><img src="/src/img/grid/06.png" /></div>
      <div class="col"><img src="/src/img/grid/07.png" /></div>
      <div class="col"><img src="/src/img/grid/08.png" /></div>
    </div>
    <div class="row">
      <div class="col"><img src="/src/img/grid/10.png" /></div>
      <div class="col"><img src="/src/img/grid/11.png" /></div>
      <div class="col"><img src="/src/img/grid/12.png" /></div>
      <div class="col"><img src="/src/img/grid/13.png" /></div>
      <div class="col"><img src="/src/img/grid/14.png" /></div>
      <div class="col"><img src="/src/img/grid/15.png" /></div>
      <div class="col"><img src="/src/img/grid/16.png" /></div>
      <div class="col"><img src="/src/img/grid/17.png" /></div>
      <div class="col"><img src="/src/img/grid/06.png" /></div>
    </div>
    <div class="row">
      <div class="col"><img src="/src/img/grid/01.png" /></div>
      <div class="col"><img src="/src/img/grid/02.png" /></div>
      <div class="col"><img src="/src/img/grid/03.png" /></div>
      <div class="col"><img src="/src/img/grid/04.png" /></div>
      <div class="col"><img src="/src/img/grid/05.png" /></div>
      <div class="col"><img src="/src/img/grid/06.png" /></div>
      <div class="col"><img src="/src/img/grid/07.png" /></div>
      <div class="col"><img src="/src/img/grid/08.png" /></div>
    </div>
    <div class="row">
      <div class="col"><img src="/src/img/grid/01.png" /></div>
      <div class="col"><img src="/src/img/grid/02.png" /></div>
      <div class="col"><img src="/src/img/grid/03.png" /></div>
      <div class="col"><img src="/src/img/grid/04.png" /></div>
      <div class="col"><img src="/src/img/grid/05.png" /></div>
      <div class="col"><img src="/src/img/grid/06.png" /></div>
      <div class="col"><img src="/src/img/grid/07.png" /></div>
      <div class="col"><img src="/src/img/grid/08.png" /></div>
      <div class="col"><img src="/src/img/grid/05.png" /></div>
    </div>
  </div>
  </body>
</html>
